import React, { Component } from 'react'
import { Input } from 'antd'
import { Button } from 'antd'
import { List } from 'antd'
import 'antd/dist/antd.css'

export default class TodoListUI extends Component {
  constructor(props) {
    // super(props)  
  }
  render() {
    return (
      <div style={{ margin: '10px' }}>
        <div>
          <Input
            type='text'
            placeholder='todo info'
            style={{ width: '300px', marginRight: '10px' }}
            value={this.props.inputValue}
            onChange={this.handleInputChange}
          />
          <Button type='primary' onClick={this.handleBtnClick}>
            提交
          </Button>
        </div>
        <List
          style={{ marginTop: '10px', width: '300px' }}
          bordered
          dataSource={this.state.list}
          renderItem={(item, index) => (
            <List.Item onClick={this.handleItemClick.bind(this, index)}>
              {item}
            </List.Item>
          )}
        ></List>
      </div>
    )
  }
}
